<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="${ctx}/css/style.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/jquery.blockUI.js"></script>
		<script type="text/javascript" src="${ctx}/js/uuid.js"></script>
		<script type="text/javascript">
	var id = new UUID();
	$(document).ready(function() {
		$('#imgObj').bind('click',function(){
			$.blockUI({ css: { 
	            border: 'none', 
	            padding: '15px', 
	            backgroundColor: '#000', 
	            '-webkit-border-radius': '10px', 
	            '-moz-border-radius': '10px', 
	            opacity: .5, 
	            color: '#fff' 
       		 } }); 
			changeImg();
		});
		
	
		$('#vote').click(function() {
			$('#validate').css("display", "block");
			$('#show1').css("display", "none");
			$('#show2').css("display", "block");
			$('#veryCode').focus();
			changeImg();
		});

		
		$('#vote2').click(function() {
			var code = $("#veryCode").attr("value");
			if (code == "") {
				alert("请输入验证码")
				return;
			}
			var data = "c=" + code + "&id=" + id;
			$.ajax( {
				type : "POST",
				url : "http://127.0.0.1:8080/votesys/resultServlet",
				data : data,
				success : callback
			});
		});

		function callback(data) {
			if (data == "true") {
				$.ajax( {
					url : 'http://127.0.0.1:8080/votesys/votedCheck',
					dataType : "jsonp",
					jsonp : "jsoncallback",
					success : function(data) {
						if (data.flag == 'false') {
							return;
						}
						alert(data.info);
					}
				});

				var itemId = "voteId=" + $("#no").text();
				$.ajax( {
					type : "POST",
					data : itemId,
					url : "http://127.0.0.1:8080/votesys/voteServlet",
					success : function(data) {
						if (data != '') {
							alert(data);
							window.location.reload();
							return;
						}
						alert("投票成功");
						window.location.reload();
					}
				});
			} else {
				alert(data);
				window.location.reload();
			}

		}

		function changeImg() {
			var timestamp = (new Date()).valueOf();
			var url=convertURL('http://127.0.0.1:8080/votesys/validateCodeServlet');
			$.ajax( {
					url : url,
					dataType : "jsonp",
					jsonp : "jsoncallback",
					success : function(data) {
						var imgSrc = $("#imgObj");
						var src="http://127.0.0.1:8080/votesys/imgTemp/"+data.info+"?random="+Math.random();
						alert(src);
						imgSrc.attr("src",src);
						$.unblockUI();
					}
				});
		}
		//时间戳   
			function convertURL(url) {
				var timestamp = (new Date()).valueOf();
				if(url.indexOf("?")>=0){  
					url = url +"&t=" + timestamp+"&id="+id;  
			    }else{  
			        url = url +"?t=" + timestamp+"&id="+id;  
			    }  
				return url;
			}

		});
</script>
	</head>
	<body>
		<div class="box1000">
			<div class="main">
				<div class="sort">
					<h1>
						请投票
					</h1>
					<div>
						<ul class="thumb">
							<li>
								<a href="#" title="andorid" style="width: 200px;"> <img
										class="show" id="img1" src="../image/1.jpg" alt="andorid" />
								</a>
								<h2>
									<span>编号：</span><span id="no">1</span>
								</h2>
								<h2>
									<span>项目：</span>andorid
								</h2>

								<p>
									<span>网络票数：</span><span id="vote_3504">389</span>票
								</p>

								<p>
									<span>短信票数：</span>327票
								</p>

								<div id="validate" style="display: none">
									<div id="codeshow">
										<img style="cursor: hand" class="vali" id="imgObj"/>
										<input id="veryCode" name="veryCode" type="text" width="10" />
									</div>
									<div id="info"></div>
								</div>
								<p>
									<a id="vote" style="cursor: hand" href="#"><span id="show1">投一票</span>
									</a>
									<a id="vote2" style="cursor: hand" href="#"><span
										id="show2" style="display: none">确认</span>
									</a>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>

	</body>
</html>
